<template>
    <div class="video">
        <video-player
                v-if="videosource"
                language="zh-CN"
                :options='{
                       sources: [{
                            type:"video/mp4",
                            src: "http://soocvp.soocedu.com/out/20171113_qn5a0955f04d286_0.mp4"
//                            withCredentials: false,
//                            type: "application/x-mpegURL",
//                            src: "http://lykhnqn.soocedu.com//20160914_57d824d2b99c8877050284_0.m3u8"
                        }],
                        controlBar: {
                         timeDivider: false,
                         durationDisplay: false
                        },
                        flash: { hls: { withCredentials: false }},
                        html5: { hls: { withCredentials: false }},
                        poster: "//vjs.zencdn.net/v/oceans.png",
                        language:"zh-CN",
                    }'
                id="my-player"
                class="video-js vjs-big-play-centered"
                @ready="playerReadied">
        </video-player>
    </div>

</template>

<script>

  import('../../node_modules/videojs-contrib-hls/dist/videojs-contrib-hls')

  export default {
    name: 'Video',
    created() {
    },
    data() {
      return {
        videosource: '1',
      }
    },
    methods: {
      playerReadied(player) {
        // var hls = player.tech({IWillNotUseThisInPlugins: true}).hls
        // player.tech_.hls.xhr.beforeRequest = function (options) {
        //   return options
        // }
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .video{
        width: 100%;
        height: 12rem;
        position: fixed;
        top:56px;
        left:0px;
        z-index: 100;
        background: black;
    }
    .video-js {
        width: 100%;
        height: 12rem;
    }
</style>
